<template>
  <div class="charge-strategy-container">
    <el-form label-width="120px" size="small">
      <el-form-item label="收费/免费">
        <el-radio-group v-model="chargeStrategyForm.chargeMode">
          <el-radio label="FEE">收费</el-radio>
          <el-radio label="FREE">免费</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 消费卡-收费模式 -->
      <template v-if="chargeStrategyForm.chargeMode === 'FEE'">
        <el-form-item label="">
          <el-radio-group v-model="chargeRuleConfigType">
            <el-radio-button label="scanChargeRuleConfig"
              >扫码/储值套餐收费配置</el-radio-button
            >
            <el-radio-button label="cardChargeRuleConfig"
              >实体卡收费配置</el-radio-button
            >
          </el-radio-group>
        </el-form-item>

        <!-- 收费模式 -->
        <el-form-item label="收费模式">
          <el-radio-group
            v-if="chargeStrategyForm[chargeRuleConfigType]"
            v-model="chargeStrategyForm[chargeRuleConfigType].billType"
          >
            <el-radio label="ELEC">电量收费</el-radio>
            <el-radio label="FIXED">固定收费</el-radio>
            <el-radio label="STEP">阶梯收费</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 最低消费 -->
        <el-form-item
          v-if="chargeRuleConfigType === 'scanChargeRuleConfig'"
          label="最低消费(元)"
        >
          <el-input
            v-model="chargeStrategyForm[chargeRuleConfigType].minimumPrice"
            placeholder="请输入最低消费"
          />
        </el-form-item>
        <!-- 充满自停预扣 -->
        <el-form-item
          v-if="chargeRuleConfigType === 'scanChargeRuleConfig'"
          label="充满自停预扣(元)"
        >
          <el-input
            v-model="chargeStrategyForm[chargeRuleConfigType].fullStopPrice"
            placeholder="请输入充满自停预扣"
          />
        </el-form-item>

        <!-- 预扣金额 -->
        <el-form-item
          v-if="chargeRuleConfigType === 'cardChargeRuleConfig'"
          label="预扣金额(元)"
        >
          <el-input
            v-model="chargeStrategyForm[chargeRuleConfigType].preDeductedAmount"
            placeholder="预扣金额1～20元，可设置2位小数，请合理设置预扣金额"
          />
        </el-form-item>

        <!-- 收费模式-电量收费 配置  -->
        <template
          v-if="chargeStrategyForm[chargeRuleConfigType].billType === 'ELEC'"
        >
          <!-- 计费方式 -->
          <el-form-item label="计费方式">
            <el-radio-group
              v-model="chargeStrategyForm[chargeRuleConfigType].chargeType"
            >
              <el-radio label="UNI">全时段统一计费</el-radio>
              <el-radio label="PEAK_VALLEY">峰谷电计费</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 全时段统一计费 配置 -->
          <template
            v-if="chargeStrategyForm[chargeRuleConfigType].chargeType === 'UNI'"
          >
            <!-- 电费单价 -->
            <el-form-item label="电费单价(元)">
              <el-input
                v-model="chargeStrategyForm[chargeRuleConfigType].price"
                placeholder="请输入电费单价"
              />
            </el-form-item>
            <!-- 服务费单价 -->
            <el-form-item label="服务费单价(元)">
              <el-input
                v-model="chargeStrategyForm[chargeRuleConfigType].servicePrice"
                placeholder="请输入服务费单价"
              />
            </el-form-item>
          </template>
          <!-- 峰谷电计费 配置 -->
          <template
            v-else-if="
              chargeStrategyForm[chargeRuleConfigType].chargeType ===
              'PEAK_VALLEY'
            "
          >
            <div class="small-label">计费方式(元/度)：</div>
            <!-- 峰值电价/服务费 -->
            <el-form-item label="">
              <el-row type="flex">
                <el-col :span="3" style="text-align: center">峰值电价</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="chargeStrategyForm[chargeRuleConfigType].peakPrice"
                    placeholder="请输入峰值电价"
                /></el-col>
                <el-col :span="4" style="text-align: center">峰值服务费</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="
                      chargeStrategyForm[chargeRuleConfigType].peakServicePrice
                    "
                    placeholder="请输入峰值服务费"
                /></el-col>
              </el-row>
            </el-form-item>
            <!-- 谷值电价/服务费 -->
            <el-form-item label="">
              <el-row type="flex">
                <el-col :span="3" style="text-align: center">谷值电价</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="
                      chargeStrategyForm[chargeRuleConfigType].valleyPrice
                    "
                    placeholder="请输入谷值电价"
                /></el-col>
                <el-col :span="4" style="text-align: center">谷值服务费</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="
                      chargeStrategyForm[chargeRuleConfigType]
                        .valleyServicePrice
                    "
                    placeholder="请输入谷值服务费"
                /></el-col>
              </el-row>
            </el-form-item>
            <!-- 平值电价/服务费 -->
            <el-form-item label="">
              <el-row type="flex">
                <el-col :span="3" style="text-align: center">平值电价</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="
                      chargeStrategyForm[chargeRuleConfigType].normalPrice
                    "
                    placeholder="请输入平值电价"
                /></el-col>
                <el-col :span="4" style="text-align: center">平值服务费</el-col>
                <el-col :span="7"
                  ><el-input
                    v-model="
                      chargeStrategyForm[chargeRuleConfigType]
                        .normalServicePrice
                    "
                    placeholder="请输入平值服务费"
                /></el-col>
              </el-row>
            </el-form-item>

            <div class="small-label">峰谷值时间段：</div>
            <!-- 峰谷值时间段 -->
            <el-form-item
              label=""
              v-for="(range, index) in chargeStrategyForm[chargeRuleConfigType]
                .peakValleyTimeRange"
              :key="index"
            >
              <el-row type="flex">
                <el-col :span="5" style="margin-right: 15px">
                  <el-select v-model="range.type" placeholder="请选择">
                    <el-option
                      v-for="item in peakValleyOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="7">
                  <el-time-select
                    style="width: 100%"
                    placeholder="开始时间"
                    v-model="range.startTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:05',
                      end: '23:55',
                    }"
                  >
                  </el-time-select>
                </el-col>
                <el-col :span="1" style="text-align: center; margin: 0 5px"
                  >至</el-col
                >
                <el-col :span="7">
                  <el-time-select
                    style="width: 100%"
                    placeholder="结束时间"
                    v-model="range.endTime"
                    :picker-options="{
                      start: '00:00',
                      step: '00:05',
                      end: '23:55',
                    }"
                  >
                  </el-time-select>
                </el-col>
                <el-col :span="2">
                  <!-- 删除 峰谷值时间段 -->
                  <el-button
                    v-if="index > 1"
                    style="margin-left: 10px"
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    @click="removePeakValleyTimeRange(index)"
                  ></el-button>
                </el-col>
              </el-row>
            </el-form-item>
            <!-- 添加 峰谷值时间段 -->
            <el-button
              v-if="
                chargeStrategyForm[chargeRuleConfigType].peakValleyTimeRange
                  .length < 9
              "
              type="primary"
              size="small"
              style="width: 493px; margin-left: 100px; margin-bottom: 20px"
              icon="el-icon-plus"
              @click="addPeakValleyTimeRange"
              >添加峰谷值时间段（{{
                chargeStrategyForm[chargeRuleConfigType].peakValleyTimeRange
                  .length
              }}/9）</el-button
            >
          </template>
        </template>

        <!-- 收费模式-固定收费 配置  -->
        <template
          v-if="chargeStrategyForm[chargeRuleConfigType].billType === 'FIXED'"
        >
          <!-- 计费规则 -->
          <el-form-item label="计费规则">
            <el-row>
              <el-col :span="10"
                ><el-input
                  v-model="chargeStrategyForm[chargeRuleConfigType].chargePrice"
                  placeholder="请输入价格(元)"
              /></el-col>
              <el-col :span="10" :offset="1"
                ><el-input
                  v-model="chargeStrategyForm[chargeRuleConfigType].chargeHour"
                  placeholder="请输入小时"
              /></el-col>
            </el-row>
          </el-form-item>
        </template>

        <!-- 收费模式-阶梯收费 配置  -->
        <template
          v-if="chargeStrategyForm[chargeRuleConfigType].billType === 'STEP'"
        >
          <div class="small-label">
            <span style="margin-right: 180px">充电功率(瓦)</span>
            <span>单价(小时/元)</span>
          </div>

          <!-- 阶梯配置 -->
          <el-form-item
            label=""
            v-for="(step, index) in chargeStrategyForm[chargeRuleConfigType]
              .stepPriceRange"
            :key="index"
          >
            <el-row type="flex">
              <!-- 阶梯充电功率 开始值 -->
              <el-col :span="2" style="margin-right: 15px">{{
                index > 0
                  ? chargeStrategyForm[chargeRuleConfigType].stepPriceRange[
                      index - 1
                    ].end /
                      1 +
                      1 || "--"
                  : 1
              }}</el-col>
              <el-col :span="1" style="margin-right: 15px">至</el-col>
              <!-- 阶梯充电功率 结束值 -->
              <el-col :span="7" style="margin-right: 15px">
                <el-input v-model="step.end" placeholder="请输入充电功率" />
              </el-col>
              <!-- 阶梯充电功率 价格 -->
              <el-col :span="6" style="margin-right: 15px"
                ><el-input v-model="step.price" placeholder="请输入单价"
              /></el-col>
              <!-- 阶梯充电功率 小时 -->
              <el-col :span="6">
                <el-input v-model="step.hour" placeholder="请输入小时"
              /></el-col>
              <el-col :span="2">
                <!-- 删除 充电功率阶梯 -->
                <el-button
                  v-if="index > 0"
                  style="margin-left: 10px"
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="removeStepPriceRange(index)"
                ></el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <!-- 添加 充电功率阶梯 -->
          <el-button
            v-if="
              chargeStrategyForm[chargeRuleConfigType].stepPriceRange.length < 9
            "
            type="primary"
            size="small"
            style="width: 520px; margin-left: 100px; margin-bottom: 20px"
            icon="el-icon-plus"
            @click="addStepPriceRange"
            >添加充电功率阶梯（{{
              chargeStrategyForm[chargeRuleConfigType].stepPriceRange.length
            }}/9）</el-button
          >
        </template>
      </template>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    chargeForm: {
      require: true,
      default: {},
    },
  },
  data() {
    return {
      chargeRuleConfigType: "scanChargeRuleConfig",
      peakValleyOptions: [
        {
          value: "PEAK",
          label: "峰时段",
        },
        {
          value: "VALLEY",
          label: "谷时段",
        },
        {
          value: "NORMAL",
          label: "平时段",
        },
      ],

      chargeRuleConfigType: "scanChargeRuleConfig",
      chargeStrategyForm: {},
    };
  },
  created() {
    this.resetChargeForm();
    this.chargeStrategyForm = {
      ...this.chargeStrategyForm,
      ...this.chargeForm,
    };
  },
  methods: {
    getChargeFormValues() {
      let formValues = {
        chargeMode: this.chargeStrategyForm.chargeMode,
      };
      if (this.chargeStrategyForm.chargeMode === "FEE") {
        formValues.scanChargeRuleConfig =
          this.chargeStrategyForm.scanChargeRuleConfig;
        formValues.cardChargeRuleConfig =
          this.chargeStrategyForm.cardChargeRuleConfig;

        // 阶梯收费start赋值
        if (
          formValues.scanChargeRuleConfig.stepPriceRange &&
          formValues.scanChargeRuleConfig.stepPriceRange.length
        ) {
          formValues.scanChargeRuleConfig.stepPriceRange.forEach(
            (item, index) => {
              if (index === 0) {
                item.start = 1;
              } else {
                item.start =
                  formValues.scanChargeRuleConfig.stepPriceRange[index - 1]
                    .end /
                    1 +
                  1;
              }
            }
          );
        }

        // 阶梯收费start赋值
        if (
          formValues.cardChargeRuleConfig.stepPriceRange &&
          formValues.cardChargeRuleConfig.stepPriceRange.length
        ) {
          formValues.cardChargeRuleConfig.stepPriceRange.forEach(
            (item, index) => {
              if (index === 0) {
                item.start = 1;
              } else {
                item.start =
                  formValues.cardChargeRuleConfig.stepPriceRange[index - 1]
                    .end /
                    1 +
                  1;
              }
            }
          );
        }
      }
      return formValues;
    },
    // 重置充值策略表单
    resetChargeForm() {
      this.chargeRuleConfigType = "scanChargeRuleConfig";
      this.chargeStrategyForm = {
        chargeMode: "FEE",
        // 扫码/储值套餐收费配置
        scanChargeRuleConfig: {
          billType: "ELEC", // ELEC
          chargeType: "UNI", // 计费方式 UNI全时段统一计费 PEAK_VALLEY峰谷电计费 billType为ELEC时该字段生效
          peakValleyTimeRange: [{}], // 电量收费-峰谷电计费-峰谷时间段
          stepPriceRange: [{}], // 阶梯收费-充电功率及单价
        },
        // 实体卡收费配置
        cardChargeRuleConfig: {
          billType: "ELEC",
          chargeType: "UNI",
          peakValleyTimeRange: [{}], // 电量收费-峰谷电计费-峰谷时间段
          stepPriceRange: [{}], // 阶梯收费-充电功率及单价
        },
      };
    },
    // 删除峰谷值时间段
    removePeakValleyTimeRange(index) {
      this.chargeStrategyForm[
        this.chargeRuleConfigType
      ].peakValleyTimeRange.splice(index, 1);
    },
    // 添加峰谷值时间段
    addPeakValleyTimeRange() {
      this.chargeStrategyForm[
        this.chargeRuleConfigType
      ].peakValleyTimeRange.push({});
    },
    // 删除充电功率阶梯
    removeStepPriceRange(index) {
      this.chargeStrategyForm[this.chargeRuleConfigType].stepPriceRange.splice(
        index,
        1
      );
    },
    // 添加充电功率阶梯
    addStepPriceRange() {
      this.chargeStrategyForm[this.chargeRuleConfigType].stepPriceRange.push(
        {}
      );
    },
  },
};
</script>
<style scoped>
.small-label {
  font-size: 14px;
  line-height: 36px;
  color: #606266;
  font-weight: bold;
  padding-left: 100px;
}
</style>
